<template>
  <div class="tools-wrapper">
    <n-space align="center">
      <n-button
        :disabled="formStore.selectComponentIndex == 0"
        size="small"
        @click="handlePrevQuestion"
        >上一题</n-button
      >
      <n-button
        :disabled="
          formStore.selectComponentIndex ==
          formStore.formInfo.content.length - 1
        "
        size="small"
        @click="handleNextQuestion"
        >下一题</n-button
      >
      <n-divider vertical></n-divider>
      <n-button
        @click="handleClear"
        type="error"
        secondary
        stronger
        size="small"
        >清空答案</n-button
      >
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useDialog, useMessage } from "naive-ui";
import { useFormStore } from "@/store/form";
const formStore = useFormStore();
const dialog = useDialog();
const message = useMessage();
const handlePrevQuestion = () => {
  if (formStore.selectComponentIndex > 0) {
    formStore.selectComponentIndex = formStore.selectComponentIndex - 1;
  }
};
const handleNextQuestion = () => {
  if (formStore.selectComponentIndex < formStore.formInfo.content.length - 1) {
    formStore.selectComponentIndex = formStore.selectComponentIndex + 1;
  }
};
const handleClear = () => {
  dialog.error({
    title: "清空当前答案",
    content: "清空后不可恢复，是否确认？",
    positiveText: "清空",
    negativeText: "取消",
    onPositiveClick: () => {
      formStore.submitInfo[formStore.selectComponent().prop] = {
        select: "",
        description: "",
        files: [],
        isComplete: false,
      };
      message.success("清空成功");
    },
  });
};
</script>

<style lang="scss" scoped>
.tools-wrapper {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
}
</style>
